<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" :editable="false" :clearable="false" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <div style="display:flex;font-size: 18px;margin-bottom:20px;">
                <div v-if="formInline.type%2==1">转入卡：<span style="color:#999">{{card_no}}</span></div>
                <div v-else>转出卡：<span style="color:#999">{{card_no}}</span></div>
                <div v-if="formInline.type%2==1" style="margin-left:20px">剩余被转入次数：<span style="color:#999">{{unuse}}</span></div>
            </div>
            <!-- 表格 -->
            <el-table  highlight-current-row show-summary :data="list" size="small" v-loading.body="listLoading" border>
                <el-table-column align="center" prop="store_name" label="门店"></el-table-column>
                <el-table-column align="center" prop="date_time" label="日期"></el-table-column>
                <el-table-column v-if="formInline.type%2==1" align="center" prop="to_card_no" label="转出卡"> </el-table-column>
                <el-table-column v-else align="center" prop="to_card_no" label="转入卡"></el-table-column>
                <el-table-column v-if="formInline.type%2==1" align="center" prop="transfer_coins" label="转出数额">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type==0">{{scope.row.transfer_coins}}</span>
                        <span v-else>{{scope.row.transfer_tickets}}</span>
                    </template>                    
                </el-table-column>
                <el-table-column v-else align="center" prop="transfer_coins" label="转入数额">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type==0">{{scope.row.transfer_coins}}</span>
                        <span v-else>{{scope.row.transfer_tickets}}</span>
                    </template>   
                </el-table-column>
                <el-table-column align="center" prop="type_name" label="业务名称"></el-table-column>
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import { getList,getPage } from "@/api/member/changeCardDetail";
    import { pickerOptionsF, pickerDateF, optionMaxTime, today } from '@/utils';
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                currentPage: 1,
                card_no:"-",
                unuse:"",
                totalDataNumber: 0,
                formInline: {},
                oldData:{
                    store_id:"",
                    vip_id:"",
                    type:"",
                    begin_time:"",
                    end_time:""
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: null
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                vm.beforeComingIn();
            })
        },
        methods: {
            beforeComingIn() {
                // console.log(this.$route.params)
                if (this.$route.query.routerflag) {
                    this.formInline.store_id = this.$route.params.store_id;
                    this.formInline.vip_id = this.$route.params.vip_id;
                    this.card_no = this.$route.params.card_no;
                    this.formInline.type = this.$route.params.type;
                    this.pickerDate = ['1970.01.01', today];
                    this.searchClick();
                }
            },
            // 搜索
            searchClick() {
                if (!this.formInline.store_id) {
                    this.$message({ type: 'error', message: '筛选条件已失效，请关闭此页面，重新跳转' });
                    return;
                }
                this.formInline.begin_time = this.pickerDate[0]
                this.formInline.end_time = this.pickerDate[1]
                this.fetchPage();
            },
            // 获取分页
            fetchPage() {
                if(this.oldData.store_id==this.formInline.store_id&&this.oldData.vip_id==this.formInline.vip_id&&this.oldData.type==this.formInline.type&&this.oldData.begin_time==this.formInline.begin_time&&this.oldData.end_time==this.formInline.end_time){
                    return;
                }
                this.listLoading = true;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.count * 1;
                    this.unuse = response.unuse;
                    this.fetchData();
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.fetchData(val);
            },
            fetchData(val = '') {//es6默认值
                this.listLoading = true;
                getList(this.formInline,val).then(res=>{
                    // console.log(res)
                    res.forEach(val=>{
                        val.type_name=val.type==0?"转币":"转票"
                        val.to_card_no=val.to_card_no?val.to_card_no:"-"
                        val.from_card_no=val.from_card_no?val.from_card_no:"-"
                    })
                    this.list=res;
                    this.oldData.store_id=this.formInline.store_id;
                    this.oldData.vip_id=this.formInline.vip_id;
                    this.oldData.type=this.formInline.type;
                    this.oldData.begin_time=this.formInline.begin_time;
                    this.oldData.end_time=this.formInline.end_time;
                    this.listLoading = false;
                })
            }
        }
    }
</script>